{extend name="main"}
{block name="button"}
    <a class='layui-btn layui-btn-sm layui-btn-primary' href="javascript:history.back(-1)">返回</a>
{/block}
{block name="style"}
<style>
    .layui-panel{height:350px;}
    .layui-panel ul{width:330px;float:left;padding:10px;margin-right:10px;margin-left:10px;}
    .layui-panel ul li a{display:block;padding-right:25px;padding-left:10px;border:1px solid #fff;line-height:28px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:black;font-size:12px;}
    .layui-panel ul li a:hover{color:#52bea6;}
    .layui-panel ul li.active a{border-color:#52bea6;background:#cefff4 no-repeat right center;color:#52bea6;}
    .layui-panel ul li.active a:before {position: absolute;font-family: iconfont!important;content: "\e6a3"; right: 50px;}
    .layui-next-step{width:200px;}
    .selectedSort{padding: 10px 15px;border: 1px solid #ed7f5a;margin-top:10px;margin-bottom:10px;background-color:#fff4f0;color:#ed7f5a;}
    .selectedSort b{font-weight:bold;}
</style>
{/block}
{block name="content"}
<div class="think-box-shadow">
    <div class="layui-row layui-col-space15 layui-cats">
        <div class="layui-col-md4">
            <div class="layui-panel">
                <ul class="first"></ul>
            </div>
        </div>
        <div class="layui-col-md4">
            <div class="layui-panel">
                <ul class="second"></ul>
            </div>
        </div>
        <div class="layui-col-md4">
            <div class="layui-panel">
                <ul class="third"></ul>
            </div>
        </div>
        <label class="layui-hide">
            <textarea id="CatsList">{$cates|raw|default=''}</textarea>
        </label>
    </div>
    <div class="selectedSort"><b>您当前选择的商品类别是：</b><label id="selectedSort"></label></div>
    <div class="hr-line-dashed"></div>
    <div class="layui-form-item text-center">
        <button class="layui-btn layui-btn-danger layui-btn-disabled" disabled lay-id="{$goods_id|default='0'}" type="submit" lay-submit>确认发布该类商品</button>
    </div>
</div>
{/block}
{block name='script'}
<script>
    var dataJson = JSON.parse($('#CatsList').val());
    var l1 = 0,
        l2 = 0;
    var cname1, cname2, cname3;
    var cid1, cid2, cid3;
    var arrow = " <font>&gt;</font> ";
    // 初始化默认数据
	$('ul', $('.layui-panel')).html('');
	fillData();
    
    $('ul.first', $('.layui-panel')).on('click', 'li', function(){
        $(this).addClass('active').siblings().removeClass('active');
        $('ul.third').html('');
        fillData($(this).index());
        l1 = $(this).index();
        cname1 = $(this).text();
        cid1 = $(this).attr('val');
        $('#selectedSort').html(cname1);
        if ($('button').attr('disabled') == undefined)
        {
            $('button').attr("disabled","disabled");;
            $('button').addClass("layui-btn-disabled");
        }
    });
    $('ul.second', $('.layui-panel')).on('click', 'li', function(){
        $(this).addClass('active').siblings().removeClass('active');
        fillData(l1, $(this).index());
        l2 = $(this).index();
        cname2 = $(this).text();
        cid2 = $(this).attr('val');
        $('#selectedSort').html(cname1+arrow+cname2);
        if ($('button').attr('disabled') == undefined)
        {
            $('button').attr("disabled","disabled");;
            $('button').addClass("layui-btn-disabled");
        }
    });
    $('ul.third', $('.layui-panel')).on('click', 'li', function(){
        $(this).addClass('active').siblings().removeClass('active');
        cname3 = $(this).text();
        cid3 = $(this).attr('val');
        $('#selectedSort').html(cname1+arrow+cname2+arrow+cname3);
        $('button').removeAttr("disabled");
        $('button').removeClass("layui-btn-disabled");
    });
    function fillData(l1, l2) {
        var temp_html = "";
        if (typeof(dataJson.option) != 'undefined' && arguments.length == 0) {
            $.each(dataJson.option, function(i, pro) {
                temp_html += '<li val="' + pro.id + '"><a>' + pro.name + '</a></li>';
            });
        } else if (typeof(dataJson.option[l1].child) != 'undefined' && arguments.length == 1) {
            $.each(dataJson.option[l1].child, function(i, pro) {
                temp_html += '<li val="' + pro.id + '"><a>' + pro.name + '</a></li>';
            });
        } else if (typeof(dataJson.option[l1].child[l2].child) != 'undefined' && arguments.length == 2) {
            $.each(dataJson.option[l1].child[l2].child, function(i, pro) {
                temp_html += '<li val="' + pro.id + '"><a>' + pro.name + '</a></li>';
            });
        }
        $('.layui-panel ul:eq(' + arguments.length + ')').html(temp_html);
    };

    $("button").click(function() {
        var releaseS = $(this).prop("disabled");
        var goods_id = $(this).attr("lay-id");
        if (releaseS == false) {
            //未被禁用
            if (goods_id == 0) {
                $.form.href("{:url('add')}?cat_id="+cid3, this);
            } else {
                $.form.href("{:url('edit')}?cat_id="+cid3+"&id="+goods_id, this);
            }
        }
    });
</script>
{/block}